<template>
  <div>
    <van-nav-bar title="商品详情"
                 left-text="返回"
                 left-arrow
                 fixed
                 @click-left="onClickLeft" />
    <div class="clear"></div>
    <div class="h50"></div>
    <div class="clear"></div>
    <div class="aui-m-slider">
      <!-- 轮播图效果 -->
      <van-swipe class="slider-wrapper">
        <van-swipe-item class="slider-item"
                        v-for="(item, index) of product.thumbs_cdn"
                        :key="index"> <a href="javascript:;"> <img :src="item"> </a> </van-swipe-item>
      </van-swipe>
    </div>
    <div class="clear"></div>
    <div class="detailbox">
      <h4>{{ product.name }}</h4>
      <div class="price">
        <em>￥</em>{{ product.vip_price > 0 ? product.vip_price : product.price }}
        <span v-if="product.vip_price > 0">￥{{ product.price }}</span>
        <font>库存:{{ product.stock }}件</font>
      </div>
    </div>
    <div class="clear"></div>
    <div class="allkbox"></div>
    <div class="clear"></div>
    <div class="detailbox_2"
         v-html="product.content">
    </div>
    <div class="clear"></div>
    <div class="h54"></div>
    <van-action-bar>
      <van-action-bar-icon icon="chat-o"
                           text="客服"
                           @click="onTel" />
      <van-action-bar-icon icon="cart-o"
                           text="购物车"
                           to="/product/product/cart" />
      <van-action-bar-button type="warning"
                             text="加入购物车"
                             @click="onCart" />
      <van-action-bar-button type="danger"
                             text="立即购买" />
    </van-action-bar>
  </div>

</template>
<script>
export default {
  created() {
    // 获取商品id
    let proid = this.$route.query.proid
    this.proid = proid
    this.Info()
  },
  data() {
    return {
      proid: 0,
      product: [],
      LoginUser: this.$cookies.get('LoginUser')
        ? this.$cookies.get('LoginUser')
        : {},
    }
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1)
    },
    async Info() {
      let data = {
        proid: this.proid,
        userid: this.LoginUser.id,
      }
      let result = await this.$api.ProductInfo(data)
        console.log(result)
      if (result.code === 0) {
        this.$notify({
          type: 'danger',
          message: result.msg,
          duration: 1500,
        })
        this.$router.go(-1)
        return false
      }
      this.product = result.data
    },
    onTel() {
      this.$dialog
        .confirm({
          title: '联系客服',
          message: '是否需要联系客服',
        })
        // 点击确认
        .then(() => {
          window.location.href = 'tel://16620145498'
        })
        //点击取消
        .catch(() => {})
    },
    // 点击加入购物车后触发的事件
    onCart() {
      // 转字符串
      let LoginUser = JSON.stringify(this.LoginUser)
      console.log(LoginUser)
      if (LoginUser == '{}' || !this.LoginUser) {
        this.$notify({
          type: 'danger',
          message: '您未登录，请先登录',
          duration: 1500,
        })
        return false
      }
      this.$dialog
        .confirm({
          title: '添加购物车',
          message: '是否需要把该商品加入购物车',
        })
        // 在异步时调用then方法
        .then(async () => {
          // on confirm
          let data = {
            proid: this.proid,
            userid: this.LoginUser.id,
            num: 1,
          }
          let result = await this.$api.CartAdd(data)
          if (result.code === 1) {
            this.$dialog
              .confirm({
                title: '添加购物车成功',
                message: '是否需要结算？',
              })
              .then(() => {
                this.$router.push({
                  path: '/product/product/cart',
                  query: { action: 'cart' },
                })
              })
              .catch(() => {})
            return false
            // 如果添加失败
          } else {
            this.$toast.loading({
              type: 'fail',
              message: result.msg,
              forbidClick: true,
              duration: 1500,
            })
            return false
          }
        })
        .catch(() => {
          // on cancel
        })
    },
  },
}
</script>
<style>
</style>